<template>
  <div class="login-wrapper">
    <div class="login-form-card" v-if="!success">
      <div style="width: 0;height: 0;overflow:hidden;">
        <input type="text">
        <input type="password">
      </div>
      <div class="inp-item">
        <div class="icon">
          <i class="iconfont icon-user"></i>
        </div>
        <input type="tel" v-model="form.phone" placeholder="常用手机号码">
      </div>
      <div class="inp-item">
        <div class="icon">
          <i class="iconfont icon-idnum"></i>
        </div>
        <input type="text" v-model="form.verificationCode" placeholder="请输入验证码">
        <div class="append-right ">
          <a href="javascript:;"
             class="cur"
             :class="{disabled:yzmBtn.disabled}"
             @click="sendYzm">{{yzmBtn.text}}</a>
        </div>
      </div>
      <div class="inp-item">
        <div class="icon">
          <i class="iconfont icon-password"></i>
        </div>
        <input type="password" v-model="form.password" placeholder="请输入密码">
      </div>
      <div class="inp-item">
        <div class="icon">
          <i class="iconfont icon-password"></i>
        </div>
        <input type="password" v-model="confirmPassword" placeholder="确认密码">
      </div>
      <br>
      <l-button block @click="handlerSubmit" :disabled="nextDisabled">注&emsp;&emsp;册</l-button>
      <div class="bottom-text text-center">
        注册即代表同意我们的
        <a href="/xieyi.html" target="_blank">《服务协议和隐私政策》</a>
      </div>
    </div>
    <div class="login-form-card done flex al-c jc-c" v-if="success">
      <i class="iconfont icon-success"></i>
      <div>
        恭喜您！<br>
        使用手机号 12312312 注册成功 <br>
        <router-link to="/login">立即登录</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import yzm from '@/mixins/yzm'

export default {
  name: 'Register',
  mixins: [yzm],
  data() {
    return {
      loading: false,
      success: false,
      form: {
        phone: '',
        verificationCode: '',
        password: ''
      },
      confirmPassword: '',
      newPassword: ''
    }
  },
  computed: {
    nextDisabled() {
      return this.form.phone.length !== 11 ||
          this.form.verificationCode.length !== 6 ||
          this.form.password.length < 6
    }
  },
  methods: {
    async sendYzm() {
      if (this.yzmBtn.disabled) {
        return
      }
      const phone = this.form.phone
      if (phone.trim().length !== 11) {
        this.$Message.error('请输入手机号')
        return
      }
      try {
        await this.$api.user.sendMessage(phone)
        this.getYzmFn()
      } catch (e) {
        console.error(e)
      }
    },
    async handlerSubmit() {
      this.$toast.loading({
        message: '注册中',
      })
      if (this.confirmPassword !== this.form.password) {
        this.$toast.fail('两次输入的密码不一致')
        return
      }
      this.loading = true
      const {phone, verificationCode, password} = this.form
      try {
        const res = await this.$api.user.register(phone, verificationCode, password)
        console.log(res)
        this.success = true
      } catch (e) {
        console.error(e)
      }
      this.loading = false
    }
  }
}
</script>

<style lang="scss">
@import "../login/style";
</style>
